<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/19
  Time: 16:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/layui/css/layui.css"/>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        layui.use(['layer','table','form'],function () {
            var layer=layui.layer;
            var table=layui.table;
            var form=layui.form;
            //1.显示表格内容
         var tabins=table.render({
                elem:'#usersTable',//usersTable对应的元素转换layui的table对象
                height:300,
                url:'/user/list',//这个表格由user/list来提供数据  ajax请求
                page:true,//启用分页功能
                limit:3,
                limits:[3,6,9,12],
                cols:[[
                    {checkbox:true},
                    {field:"id",title:"编号"},
                    {field:"name",title:"姓名"},
                    {field:"pwd",title:"密码"},
                    {field:"age",title:"年龄"},
                    {field:"addr",title:"地址"},
                    {title:"操作",toolbar:'#toolbar1'}
                ]]

            });

            //2.增加用户btn  click事件
            $("#addUserBtn").click(function () {
                 //1.打开一个对框
                layer.open({
                    type:1,
                    title:'增加用户',
                    area:['500px','400px'],
                    content:$("#addUserDiv")
                });
            });

            //3.完成表单的提交
            //监听addUserFilter的submit事件
            form.on('submit(addUserFilter)',function (data) {
                //1.提交数据
                $.ajax({
                    type:"post",//请求的方法  //post
                    url:"/user/save", //那服务组件来处理本次请求  data:提交的数据
                    //data: "name="+data.field.name+"&pwd="+data.field.pwd+"&age="+data.field.age+"&addr="+data.field.addr,
                    data:$("#addUserForm").serialize(),//将这个表单中元素自动转换成上面的格式
                    success:function (resp) {//回调方法,服务器成功返回数据，这个方法就执行

                        $("#addUserForm")[0].reset();//将jquery对象转换成dom对象,完成重置功能
                        layer.closeAll();//关闭打的所有对话框架
                        //1.刷新table  重载这个表格中的数据
                        tabins.reload();
                        layer.msg(resp.msg)
                    },
                    error:function () {
                        console.info("出错了")
                    }
                });
                return false;
            });

            //4.表格的工具栏事件
            table.on('tool(userTableFilter)',function (data) {
                /* console.log(data.data)//data.tr
                 console.log(data.event);*/
                if(data.event=='del'){//删除
                    //1.取用户id，将用户用户发给服务器，后台来删除
                    var userId=data.data.id;
                    //user/delete/59
                    $.get("/user/delete/"+userId,{},function (resp) {
                        //2.如果删除成功，删除表格这一行[将这个表格reload()]
                        //data.tr.remove();
                        tabins.reload();
                        layer.msg(resp.msg);
                    });
                }else{//修改

                }
            });

            //5.多行删除
            $("#delUserBtn").click(function () {
                var userids=[];//定义一个数组，用于存储要删除的用户编号
               //1.取出要删除的行上的用户编号
                var checkStatus = table.checkStatus('usersTable'); //idTest 即为基础参数 id 对应的值
                //console.log(checkStatus.data)
                $.each(checkStatus.data,function (index,item) {
                    userids.push(item.id);
                });
                if(userids.length>0){
                    $.get("/user/dels?ids="+userids,{},function (resp) {
                        //2.将多个用户编号使用ajax发后台，后台来删除
                        tabins.reload();
                        layer.msg(resp.msg);
                        //3.将这个表格reload()
                    });
                }else{
                    layer.msg("请先选择要删除的行!")
                }

            });
        });
    </script>
</head>
<body>
<button class="layui-btn layui-btn-radius  layui-btn-warm" id="addUserBtn">增加用户</button>
<button class="layui-btn layui-btn-radius  layui-btn-warm" id="delUserBtn">删除用户</button>
<table id="usersTable" lay-filter="userTableFilter"></table>
<!-- table中的工具条  修改与删除  begin-->
<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- table中的工具条  修改与删除  end-->

<!--增加用户表单  开始 -->
<div class="layui-container" style="display: none;width: 500px" id="addUserDiv">
    <h2>增加一个用户</h2>
    <form class="layui-form" id="addUserForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="addr" placeholder="请输入地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUserFilter">立即提交</button>

                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--增加用户表单 结束 -->
</body>
</html>
